<template>
	<view class="chonse_place">
		<!-- 非异地还车 -->
	<template v-if="!on">
		<view class="place_top" >
				<view class="top_left">
					先择城市或景点
				</view>
				<view class="top_right">
					异地还车
				</view>
			</view>
			<view class="place_middle" >
				<view class="middle_one" @click="toquickindex('1')">{{place}}</view>
				<view class="middle_two" @click="chonsePlace()">{{address}}</view>
				<view class="middle_three"><tm-switch v-model="on" :text='[]' :width='80' :height='40' @change='changeSwitch' disabled></tm-switch></view>
			</view>
	</template>
<!-- 异地换车 -->
	<template v-else>
			<view class="place_top" >
				<view class="top_left">
					取车地点
				</view>
				<view class="top_right">
					异地还车
				</view>
			</view>
			<view class="place_middle" >
				<view class="middle_one" @click="toquickindex('1')">{{place}}</view>
				<view class="middle_two">临安广场</view>
				<view class="middle_three"><tm-switch v-model="on" :text='[]' :width='80' :height='40' @change='changeSwitch'></tm-switch></view>
			</view>
			<view class="place_top" >
				<view class="top_left">
					还车地点
				</view>
				<view class="top_right">
					异地还车
				</view>
			</view>
			<view class="place_middle" >
				<view class="middle_one" @click="toquickindex('2')">{{place2}}</view>
				<view class="middle_two">肇庆广信学院</view>
				<view class="middle_three"></view>
			</view>
	</template>

		<tm-divider  ></tm-divider>
		<view class="place_time" @click="dotest">
			<view class="time_one">
				<span>{{sdate}}</span><br>
				{{sweek}} {{stime}}
			</view>
			<view class="time_one">
				<tm-divider :text="days+'天'"></tm-divider>
			</view>
			<view class="time_one">
				<span>{{edate}}</span><br>
				{{eweek}} {{etime}}
			</view>
		</view>
		<view class="place_btn">
			<tm-button  theme="bg-gradient-orange-accent" :round="24" block size='l' @click='SelectCar'>去选车</tm-button>
		</view>
		<view class="place_bottom">
			<view class="bottom_one">
				<tm-icons  name="icon-filter-fill"></tm-icons>
				租车免押|阿力提供多种免押方式
			</view>
			<view class="bottom_two">
				立即查看
			</view>
		</view>
		<tm-message ref="toast"></tm-message>
	</view>
</template>

<script>
	export default {
		name:'ChonsePlace',
		props:{
			address:{
				type:String,
				default:''
			},
			sdate:{
				type:String,
				default:'12月1日'
			},
			edate:{
				type:String,
				default:'12月2日'
			},
			stime:{
				type:String,
				default:'10:00'
			},
			etime:{
				type:String,
				default:'10:00'
			},
			sweek:{
				type:String,
				default:'周一'
			},
			eweek:{
				type:String,
				default:'周二'
			},
			starttime:{
				type:String,
			
			},
			endtime:{
				type:String,
			},
			place:{
				type:String,
				
			},
			place2:{
				type:String,
			
			},
			days:{
				type:String
			}
		},
		data() {
			return {
				on:false,
				ceshit:'2022-12-1',
				bts:'2022-12-10',
				ets:'',
			}
		},
		methods: {
			chonsePlace(){
				uni.navigateTo({
					url:'/pages/choosestores/choosestores'
				})
			},
			dotest(){
				
			console.log('333',this.starttime,this.endtime);
				uni.navigateTo({ 
					url:`/pages/chonsecalender/chonsecalender?stime=${this.stime}&etime=${this.etime}&starttime=${this.starttime}&endtime=${this.endtime}&days=${this.days}`
				})
		
			},
			changeSwitch(e){

			},
			SelectCar(){
				
				uni.setStorageSync('chonsePlace',{
					sdate:this.sdate,edate:this.edate,stime:this.stime,etime:this.etime,place:this.place,place2:this.place2,days:this.days,address:this.address
				})
				uni.navigateTo({
					url:`/pages/chonsecars/chonsecars?sdate=${this.sdate}&edate=${this.edate}&stime-${this.stime}&etime=${this.etime}&address=${this.address}`
				})

			},
			toquickindex(id){
				uni.navigateTo({
					url:`/pages/quickindex/quickindex?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.chonse_place{
	width: 85%;
	margin: auto;
	background-color: #ffffff;
	height: 100%;
	padding: 30rpx;
	border-radius: 30rpx;
	.place_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #cccccc;
		margin-top:20rpx ;
	}
	.place_middle{
		display: flex;
		justify-content: space-evenly;
		text-align: center;
		line-height: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		font-weight: 600;
		.middle_one{
			
			width: 20%;
		}
		.middle_two{
			overflow:hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			width: 60%;
		}
		.middle_three{
			width: 20%;
		}
	}
	.place_time{
		display: flex;
		text-align: center;
		align-items: center;
		margin: 20rpx 0;
		.time_one{
			width: 33%;
			font-size: 24rpx;
			color: #cccccc;
			span{
				font-size: 28rpx;
				color: black;
				font-weight: 600;
			}
		}
	}
	.place_btn{
		width: 90%;
		margin: auto;
	}
	.place_bottom{
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-top: 25rpx;
		.bottom_one{
			
		}
		.bottom_two{
			color: #31bd87;
		}
	}
}
</style>
